<template>
  <div class="registbox">
    <TopBacground />
    <div class="regist">
      <van-icon name="cross close" @click="close()" />

      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          required
          name="用户名"
          label="用户名"
          placeholder="4到16位(字母，数字，下划线，减号)"
          @blur="test3(username)"
        />
        <van-field
          v-model="password"
          type="password"
          required
          name="密码"
          label="密码"
          placeholder="密码最少6位数字"
          @blur="test1(password)"
        />
        <van-field
          v-model="email"
          required
          type="text"
          name="邮箱"
          label="邮箱"
          placeholder="请输入邮箱号"
          @blur="test2(email)"
        />
        <van-field
          v-model="sms"
          center
          clearable
          required
          type="sms"
          label="验证码"
          name="验证码"
          placeholder="请输入邮箱验证码"
        >
          <template #button>
            <van-button size="small" color="#07c160" native-type="button" @click="sendcode()">发送验证码</van-button>
          </template>
        </van-field>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">注册</van-button>
        </div>
      </van-form>
      <p>
        已有账号直接
        <router-link to="/login">登录</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { registrequest } from "@/api/cheyi.js";
import { registcode } from "@/api/cheyi.js";
import router from "../../router";
import TopBacground from "../../components/cheyi/mine/TopBacground.vue";

import qs from "qs";
export default {
  components: {
    TopBacground
  },
  data() {
    return {
      username: "",
      password: "",
      email: "",
      sms: "" //验证码
    };
  },
  methods: {
    // 关闭界面
    close() {
      this.$router.go(-1);
    },
    // 正则校验
    test1(val) {
      // 密码强度正则，最少6位数字
      let pwreg = /\d{6}/;
      if (pwreg.test(val) == true) {
        this.password = val;
      } else {
        Toast("格式不正确");
        this.password = "";
      }
    },
    test2(val) {
      //Email正则
      let emreg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; // eslint-disable-line
      if (emreg.test(val) == true) {
        this.email = val;
      } else {
        Toast("格式不正确");
        this.email = "";
      }
    },
    test3(val) {
      // 用户名正则，4到16位（字母，数字，下划线，减号）
      let userreg = /^[a-zA-Z0-9_-]{4,16}$/;
      if (userreg.test(val) == true) {
        this.username = val;
      } else {
        Toast("用户名格式不正确");
        this.username = "";
      }
    },
    // 发送验证码
    sendcode() {
      console.log(this.email);

      if (this.email != "") {
        registcode({ email: this.email }).then(ok => {
          console.log(ok);
          if (ok.data.code == 1) {
            console.log(ok.data.code);
          } else {
            this.$toast.fail(ok.data.msg + "验证码有问题");
          }
        });
      } else {
        this.$toast.fail("请先输入邮箱");
      }
    },
    // 提交表单
    onSubmit() {
      console.log(this.username);

      if (this.username && this.password && this.email && this.sms) {
        registrequest({
          userName: this.username,
          userPassword: this.password,
          email: this.email,
          code: this.sms
        }).then(ok => {
          console.log(ok);
          if (ok.data.code == 1) {
            this.$toast.success(ok.data.msg + "去登录");
            this.$router.push("/login");
          } else {
            this.$toast.fail(ok.data.msg + "响应错误");
          }
        });
      } else {
        this.$toast.fail("请求失败");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.registbox {
  width: 100%;
  padding-top: 34.667vw;
  position: relative;
  .regist {
    width: 95vw;
    margin: auto;
    ::v-deep .close {
      margin-bottom: 8vw;
      font-size: 6.4vw;
    }
    p {
      padding-right: 5.333vw;
      text-align: right;
      font-size: 3.733vw;
      color: gray;
      a {
        font-size: 4.267vw;
        color: rgb(124, 146, 243);
        text-decoration: underline;
      }
    }
  }
}
</style>